<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import tableItem from '../components/tableItem.vue'
import { saveRygnpz } from '@/utils/table-header'
import { useMainStore } from '@/store/main'

const store = useMainStore()
// 入参
const props = defineProps<{
  tableHeade: any
  gnbm: string
  showExport: boolean
}>()
const emit = defineEmits(['refresh'])

// 生命周期
onMounted(() => {
  // 打开弹框（入参个性化配置数据）
})

// ref
const tableRef = computed(() => {
  return headerIndex.value === 0 ? showTableRef.value : exportTableRef.value
})
const showTableRef = ref<InstanceType<typeof tableItem>>()
const exportTableRef = ref<InstanceType<typeof tableItem>>()

// gnbm
const gnbmValue = computed(() => {
  return `${props.gnbm}-${headerIndex.value === 0 ? 'show' : 'export'}` || ''
})
/*
 * tabs切换
 */
const headerIndex = ref(0)
const headerClickChange = (value: number) => {
  headerIndex.value = value
}

/*
 * 打开弹框（入参个性化配置数据）
 */
//
const dialogVisible = ref(false)

const openDialog = () => {
  dialogVisible.value = true
}

/**
 * 恢复默认设置
 */
const defaultHeader = () => {
  tableRef.value?.defaultHeader()
  ElMessage.success('操作成功')
}
/*
 * 保存表格自定义数据
 */
const saveData = async () => {
  const param = {
    gnbm: gnbmValue.value,
    dwbm: store.$state.userInfo.dwbm,
    rybm: store.$state.userInfo.ryid,
    json: tableRef.value?.rightList,
    name: `${gnbmValue.value}.txt`,
  }
  const res = await saveRygnpz(param)
  if (res) {
    ElMessage.success('保存成功')
    handleClose()
    emit('refresh')
  }
}

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
  headerIndex.value = 0
  showTableRef.value?.leftTable.setScrollTop(0)
  showTableRef.value?.rightTable.setScrollTop(0)
  exportTableRef.value?.leftTable.setScrollTop(0)
  exportTableRef.value?.rightTable.setScrollTop(0)
}

defineExpose({ openDialog })
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    title="自定义"
    width="60%"
    @closed="handleClose"
    :close-on-click-modal="false"
  >
    <div class="dialog-header">
      <button
        class="header-text"
        :class="headerIndex === 0 ? 'header-avtive' : ''"
        @click="headerClickChange(0)"
      >
        列表自定义
      </button>
      <button
        v-if="showExport"
        class="header-text"
        :class="headerIndex === 1 ? 'header-avtive' : ''"
        @click="headerClickChange(1)"
      >
        导出自定义
      </button>
    </div>
    <div class="content" v-if="headerIndex === 0">
      <table-item
        ref="showTableRef"
        types="list"
        :gnbm="gnbmValue"
        :tableHeade="props.tableHeade"
      ></table-item>
    </div>
    <div class="content" v-if="headerIndex === 1">
      <table-item
        ref="exportTableRef"
        types="export"
        :gnbm="gnbmValue"
        :tableHeade="props.tableHeade"
      ></table-item>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="defaultHeader">恢复默认设置</el-button>
        <el-button type="primary" @click="saveData">保 存</el-button>
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.dialog-header {
  .header-text {
    color: #4a76ab;
  }
  .header-text + .header-text {
    margin-left: 10px;
  }
  .header-avtive {
    color: #fff;
    background-color: #3c89d0;
  }
}
.content {
  width: 100%;
  display: flex;
}
</style>
